<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/views/global/taglibs.jsp" %>
<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath %>">
    <title>
    <c:choose><c:when test="${empty itemInfo.id }">ADD</c:when><c:otherwise>EDIT</c:otherwise></c:choose> PRODUCT
    </title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<%@include file="/views/global/ShopInclude.jsp" %>
	<link href="static/css/page/ProductEdit.css" rel="stylesheet" type="text/css">
  </head>
  
  <body class="submitBg" style="-moz-transform: none;-webkit-transform: none;-o-transform: none;">
  <%@include file="/views/global/header.jsp" %>
  <c:set var="pageName" value="productEdit"></c:set>
  <%@include file="/views/global/SellerHeader.jsp" %>
  <div class="submitFormContainer submit-form center font fontColorGray">  <!-- 表单填写部分 -->
    <div class="submitFormTitle">RELEASE YOUR PRODUCTS HERE !</div>
    <hr class="hrBorder">
    <form id="itemForm" name="itemForm" method="post" target="_blank">
      <input type="hidden" id="itemId" name="id" value="${itemInfo.id }"/>
      <input type="hidden" id="userId" name="userId" value="${USER_SESSION.userInfo.id }"/>
      <textarea rows="4" cols="50" name="productDesc" style="display:none;"></textarea>
      <textarea rows="4" cols="50" name="logisticsDesc" style="display:none;"></textarea>
      <textarea rows="4" cols="50" name="strImageArray" style="display:none;">[]</textarea>
      <textarea rows="4" cols="50" name="strSkuArray" style="display:none;">[]</textarea>
      <table>
        <tr class="categoryLine hrTableThin">
          <td class="formLabel left"><i>*</i>CATEGORY:</td>
          <td class="dropdown-group">
            <input type="hidden" class="dropdownHidden" name="cid" value="${itemInfo.cid }"/>
          	<input type="text" class="dropdownInput dropdownWider" name="categoryName" value="${categoryName }" readonly/>
          	<img class="formDropdownArrow" src="static/images/global/formArrow.png"/>
            <ul class="dropdownOptions">
              <c:forEach var="item" items="${firstLevelCategoryList }">
              	<li>
              		<c:choose>
              			<c:when test="${empty item.childCategoryList }"><div class="leaf" value="${item.id }">${item.name }</div></c:when>
              			<c:otherwise>
              				<div>${item.name }</div>
		              		<ul class="dropdownChildOptions">
		              			<c:forEach var="second" items="${item.childCategoryList }">
		              			<li>
		              				<c:choose>
				              			<c:when test="${empty second.childCategoryList }"><div class="leaf" value="${second.id }">${second.name }</div></c:when>
				              			<c:otherwise>
				              				<div>${second.name }</div>
				              			</c:otherwise>
				              		</c:choose>
		              			</li>
		              			</c:forEach>
		              		</ul>
              			</c:otherwise>
              		</c:choose>
              	</li>
              </c:forEach>
            </ul>
            
          </td>
        </tr>
        <tr><td colspan="2"><p class="hrThin" style="width:1152px;height: 6px;"></p></td></tr>
        <tr class="productNameLine">
          <td class="formLabel left"><i>*</i>PRODUCT NAME:</td>
          <td>
	          <input type="text" name="title" class="productNameInput submitInput submitInputWider" value="${itemInfo.title }"
	           required="name required" maxlength="60"/>
	          <span class="inputAlert">ALSO CAN INPUT <span id="leftChars">60</span> WORDS</span>
	          
	          <span class="error"></span>
          </td>
        </tr>
        <tr><td colspan="2"><p class="hrThin" style="width:1152px;height: 6px;"></p></td></tr>
        <tr class="productNameLine">
          <td class="formLabel left">CHINESE NAME:</td>
          <td>
	          <input type="text" name="cnName" class="productNameInput submitInput submitInputWider" value="${itemInfo.cnName }"
	           	 maxlength="15"/>
	          <span class="inputAlert">ALSO CAN INPUT <span id="leftChars">15</span> WORDS</span>
	          <span class="error"></span>
          </td>
        </tr>
        <tr class="priceLine">
          <td class="formLabel left"><i>*</i>PRICE:</td>
          <td><input type="number" name="price" class="priceInput submitInput submitInputShort" value="${itemInfo.price }" required="price required" min="0.01"/> 
          	<span>RMB</span> <span class="inputAlert priceLineAlert">INCLUDING LOGISTICS FEE</span>
          	<span class="error"></span>
          </td>
        </tr>
        
        <tr class="discountLine">
          <td class="formLabel left">DISCOUNT:</td>
          <td>
            <input type="text" name="discountName" class="discountInput submitInput submitInputWider" value="${itemInfo.discountName }" maxlength="30" placeholder="CHRISTMAS DISCOUNT"/>
            <span class="volumeFormLabel">DISCOUNT PRICE: </span>
            <input type="number" name="discountVolume" class="submitInput submitInputShort" value="${itemInfo.discountVolume }" min="0"/>
            <span class="inputAlert">VOLUME:</span>
            <input type="text" name="discountPercent" class="volumeInput submitInput submitInputShort" value="${itemInfo.discountPercent }" readonly="readonly"/><span>%</span>
            <span class="error"></span>
          </td>
        </tr>
        
        <tr class="packageLine">
          <td class="formLabel left"><i>*</i>PACKAGE CHOICE:</td>
          <td>
            <ul class="packageTypes">
            	<c:forEach var="sku" items="${itemSkuList }" varStatus="pc">
            		<li class="packageType" packageId="${sku.id }">
						<span class="packageTypeTitle">TYPE${pc.count }:</span>
						<input type="text" name="packageName" class="packageTypeInput submitInput submitInputShort" value="${sku.properties }"/>
						<span class="packageTypeStock">STOCK:</span>
						<input type="number" name="packageQuantity" class="packageStockInput submitInput submitInputShort" min="1" value="${sku.quantity }"/>
						<span class="packageTypePrice">PRICE:</span>
						<input type="number" name="packagePrice" class="packagePriceInput submitInput submitInputShort" min="0.01" value="${sku.price }"/>
					</li>
            	</c:forEach>
				<c:forEach var="index" begin="1" end="6">
					<li class="packageType" packageId="0">
						<span class="packageTypeTitle">TYPE${index+fn:length(itemSkuList) }:</span>
						<input type="text" name="packageName" class="packageTypeInput submitInput submitInputShort" />
						<span class="packageTypeStock">STOCK:</span>
						<input type="number" name="packageQuantity" class="packageStockInput submitInput submitInputShort" min="1" />
						<span class="packageTypePrice">PRICE:</span>
						<input type="number" name="packagePrice" class="packagePriceInput submitInput submitInputShort" min="0.01"/>
					</li>
				</c:forEach>
            </ul>
            <img class="packageTypeArrow" src="static/images/page/submitCommodity/navigationArrowDown.png" />
            <span class="error"></span>
          </td>
        </tr>
        
        <tr><td colspan="2"><p class="hrThin" style="width:1152px;"></p></td></tr>
        
        <tr class="productDetailTitle hrTableThin">
          <td class="formLabel fontbold">PRODUCT DETAIL
             <p class="hrThin" style="width:1152px;height: 9px;"></p>
          </td>
        </tr>
        
        <tr class="brandLine">
          <td class="formLabel left"><i>*</i>BRAND:</td>
          <td>
          	<input type="text" name="brand" class="brandInput submitInput submitInputWider" value="${itemInfo.brand }" required="brand required" maxlength="30"/>
          	<span class="inputAlert">ALSO CAN INPUT 30 WORDS</span>
          	<span class="error"></span>
          </td>
        </tr>
        
        <tr class="materialLine">
          <td class="formLabel left">MATERIAL:</td>
          <td>
          	<input type="text" name="material" class="materialInput submitInput submitInputWider" value="${itemInfo.material }" maxlength="30"/>
          </td>
        </tr>
        
        <tr class="originLine">
          <td class="formLabel left"><i>*</i>ORIGIN:</td>
          <td class="originDropdown dropdown-group">
            <input type="hidden" class="dropdownHidden" name="originIds" value="${originAddress.strLocationIds }"/>
            <input type="text" class="dropdownInput dropdownWider" name="originNames" value="${originAddress.strLocationNames }" readonly/>
            <img class="formDropdownArrow" src="static/images/global/formArrow.png"/>
            <ul class="dropdownOptions">
            	<c:forEach var="item" items="${firstLevelLocationList }">
            		<li>
            			<div value="${item.id }" <c:if test="${empty item.childLocationList }"> class="leaf"</c:if>>${item.name }</div>
		          		<ul class="dropdownChildOptions">
		          			<c:forEach var="second" items="${item.childLocationList }">
		          			<li>
		          				<div value="${second.id }" <c:if test="${empty second.childLocationList }"> class="leaf"</c:if>>${second.name }</div>
		          				<ul class="dropdownChildOptions">
		          					<c:forEach var="third" items="${second.childLocationList }">
          							<li>
          								<div value="${third.id }" <c:if test="${empty third.childLocationList }"> class="leaf"</c:if>>${third.name }</div>
				          				<ul class="dropdownChildOptions dropdownWider">
				          					<c:forEach var="fourth" items="${third.childLocationList }">
		          							<li>
		          								<div value="${fourth.id }" <c:if test="${empty fourth.childLocationList }"> class="leaf"</c:if>>${fourth.name }</div>
		          							</li>
		          							</c:forEach>
				          				</ul>
          							</li>
          							</c:forEach>
		          				</ul>
		          			</li>
		          			</c:forEach>
		          		</ul>
            		</li>
            	</c:forEach>
            </ul>
          </td>
        </tr>
        
        <tr class="weightLine">
          <td class="formLabel left">WEIGHT:</td>
          <td>
            <input type="text" name="weight" class="weightInput submitInput submitInputShort" value="${itemInfo.weight }"/>
            <span>G</span>
          </td>
        </tr>
        
        <tr class="customizedLine">
          <td class="formLabel left"><i>*</i>CUSTOMOZED?</td>
          <td class="dropdown-group">
          	<!-- 
          	<select name="customized" class="dropdownSelect dropdownShorter">
          		<c:forEach var="entry" items="${deletedMap }">
          			<option value="${entry.key }">${entry.value }</option>
          		</c:forEach>
          	</select>
          	 -->
			<input type="hidden" class="dropdownHidden" name="customized" value="${itemInfo.customized }"/>
			<input type="text" class="dropdownInput dropdownShorter" value="${deletedMap[itemInfo.customized] }" readonly/>
			<img class="formDropdownArrow" src="static/images/global/formArrow.png"/>
			<ul class="dropdownOptions dropdownShortOptions">
			    <li><div value="y" class="leaf">YES</div></li>
			    <li><div value="n" class="leaf">NO</div></li>
			</ul>
			<span class="error"></span>
          </td>
        </tr>
      </table>
    </form>
    <div class="form-group row hrTableThin">
    </div>
    <div class="form-group row hrTableThin fontbold">
    	<div>PRODUCT DESCRIPTION</div>
    </div>
    <div class="form-group row" style="height: 245px;">
    	<div class="col-xs-2">
    		<div class="formLabel"><i>*</i>UPLOAD PHOTOS: </div>
    	</div>
    	<div class="col-xs-10">
    		<div class="addImageArea left" id="itemImageContainer">
            	<input type="button" id="addImageFile" class="addImage"/>
				<img class="addImageIcon" src="static/images/page/submitCommodity/photoAddIcon.png"/>
            </div>
            <ul id="sortable" class="imagesAdded right">
            	<c:forEach var="itemImage" items="${itemImages }" varStatus="pc">
					<li class="ui-state-default" id="li_${pc.count }">
						<img id="itemImageId_${pc.count }" src="${itemImage.originUrl }" imageId="${itemImage.id }" index="${pc.count }" blank="false"/>
						<div class="imgDeleteIcon" onclick="deleteImage(this,'${pc.count }')"></div>
					</li>
				</c:forEach>
				<c:forEach var="index" begin="1" end="${4-fn:length(itemImages) }">
					<li class="ui-state-default" id="li_${index }">
						<img id="itemImageId_${index }" src="static/images/module/image_upload/imageAddBlank.png" imageId="0" index="${index }" blank="true"/>
					</li>
				</c:forEach>
			</ul>
    	</div>
    </div>
    <!-- <div class="form-group row hrTableThin">
    	<div class="col-xs-2">
    		<div class="formLabel">ATTENTION: </div>
    	</div>
    	<div class="col-xs-10">
    		<div class="photoAttentionContent">
	    		CLICK ON THE PLUS TO UPLOAD IMAGE.<BR/>
	            CLICK ON THE CROSS TO DELETE THE PICTURES, THEN UPLOAD AGAIN.<BR/>
	            DRAG THE IMAGE TO CHANGE POSITION.<BR/>
    		</div>
    	</div>
    </div> -->
    <div class="form-group row hrTableThin" style="height: 630px;">
    	<div class="col-xs-2">
    		<div class="formLabel">DESCRIPTION: </div>
    	</div>
    	<div class="col-xs-10">
    		<div class="description">
    			<script type="text/plain" id="productDesc" style="height:605px;">${productDesc }</script>
	          	
    		</div>
    	</div>
    </div>
    <div class="form-group row hrTableThin fontbold">
    	<div class="formLabel" style="width: 200px;">LOGISTIC & SERVICE</div>
    </div>
    <div class="form-group row hrTableThin" style="margin-top: 33px;height: 630px;">
    	<div class="col-xs-2">
    		<div class="formLabel">DESCRIPTION: </div>
    	</div>
    	<div class="col-xs-10">
    		<div class="description">
    			<script type="text/plain" id="logisticsDesc" style="height:605px;">${logisticsDesc }</script>
    		</div>
    	</div>
    </div>
    <div class="form-group row">
    	<div class="col-xs-2">
    		<button type="button" class="btn btn-default" onclick="" style="border-radius: 0;width: 100px; height: 40px; color: #fff; background: #b5b6b3; margin: 50px 0 60px 250px;">EXIT</button>
    	</div>
    	<div class="col-xs-8">
    		<div id="msg"></div>
    	</div>
    	<div class="col-xs-2">
    		<button type="button" class="btn btn-default pull-right" onclick="saveNode(this)" style="border-radius: 0;width: 100px; height: 40px; color: #fff; background: #47caf4; margin: 50px 250px 60px 0;">POST</button>
    	</div>
    </div>
    <div class="form-group row">
    	<div class="col-xs-5"></div>
    	<div class="col-xs-7">
    		<input type="button" name="preview" class="previewBtn center-block" value="PREVIEW" onclick="preview(this)"/>
    	</div>
    </div>
  </div>
  
  <!-- <a href="javascript:void(0)" class="translateBtn">APPLY TRANSLATION SERVINCE</a> -->

<!-- 页尾 -->
<%@include file="/views/global/AdminScripts.jsp" %>
<%@include file="/views/global/footer.jsp" %>
<!-- 页尾结束 -->
<script type="text/javascript">
document.errorPlacement = function(error, element){
	error.appendTo( element.parent().find(".error") );
}
</script>
	<script type="text/javascript" src="static/javascript/jquery.plugin/jquery.numberformatter-1.2.2.min.js"></script>
	<script type="text/javascript" src="static/javascript/global/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="static/javascript/global/ueditor/ueditor.all.js"></script>
	<script type="text/javascript" src="static/javascript/jqueryUI/ui/jquery-ui.min.js"></script>
	<script type="text/javascript" src="static/javascript/module/generic.js"></script>
	
	<script type="text/javascript" src="static/javascript/page/product/ProductEdit.js"></script>
  </body>
</html>
